<script setup>
import { ref, onMounted } from 'vue'
import { getAllPosReviewApi, getPosByIdApi, passReviewApi, noPassReviewApi } from '../../api/admin'
import { ElMessage, ElMessageBox } from 'element-plus'

onMounted(() => {
  QueryReview()
})
// 职位表格数据
const posListTable = ref([
  {
    id: 1,
    title: 'Java开发',
    salaryRange: '10k-20k',
    experienceRequired: '1-3年',
    educationRequired: '本科',
    positionType: '全职',
    createTime: '2021-01-01 T 10:00:00',
  }
])
//分页查询待审核的职位
const QueryReview = async () => {
  const result = await getAllPosReviewApi(currentPage.value, pageSize.value)
  if(result.code){
    total.value = result.data.total
    posListTable.value = result.data.rows
  }else{
    ElMessage.error(result.msg)
  }
}
//职位详情dialog
const detailVisible = ref(false)
const positionDetail = ref({
  companyName: '上海XXX科技有限公司',
  title: '发生士大夫士大夫',
  salaryRange: '2k-3k',
  workLocation: '手动阀手动阀手动阀阿嘎尔啊',
  experienceRequired: '手动阀手动阀手动阀阿嘎尔啊',
  educationRequired: '手动阀手动阀手动阀阿嘎尔啊',
  positionType: '萨法',
  createTime: '2022-05-05T09:05:05',
  description: '手动阀手动阀手动阀阿嘎尔啊手动阀手动阀手动阀阿嘎尔啊',
  requirements: '...'
})
//通职位id查询职位详情
const queryByPosId = async (id) => {
  detailVisible.value = true
  const result = await getPosByIdApi(id)
  if(result.code){
    positionDetail.value = result.data
  }else{
    ElMessage.error(result.msg)
  }
}
//分页
const total = ref(20)
const currentPage = ref(1)
const pageSize = ref(10)
const background = ref(true)
//每页大小改变时触发
const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1
  QueryReview()
}
//当前页码改变时触发
const handleCurrentChange = (val) => {
  currentPage.value = val
  QueryReview()
}
//批量通过
const selectedIds = ref([])
const handleSelectionChange = (selection) => {
  if(selection && selection.length > 0){
    selectedIds.value = selection.map( item => item.id)
  }else{
    selectedIds.value = []
  }
}
const batchPass = () => {
  if(selectedIds.value && selectedIds.value.length > 0){
    ElMessageBox.confirm( '确定批量通过这些职位吗？', 'Warning', {
      confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', 
    }).then(async () => {
      const result = await passReviewApi(selectedIds.value)
      if(result.code){
        ElMessage.success('已批量通过这些职位')
        QueryReview()
      }
    })
  }else{
    ElMessage.warning('请选择要批量通过职位')
  }
}
//单个通过
const reviewPass = (id) => {
  ElMessageBox.confirm( '确定通过该职位吗？', 'Warning', {
    confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', 
  }).then(async () => {
    const result = await passReviewApi(Array.of(id))
    if(result.code){
      ElMessage.success('已通过该职位')
      QueryReview()
    }else{
      ElMessage.error(result.msg)
    }
  }).catch(() => {})
}
//审核不通过
const noReviewPass = (id) => {
  ElMessageBox.prompt('请输入审核不通过的原因', '确定要阻止发布该职位吗？', {
    confirmButtonText: '确定',
    cancelButtonText: 'Cancel',
    inputPattern: /^.{2,}$/, // 至少 2 个字符
    inputErrorMessage: '请输入不通过的原因',
  }).then(async ({ value }) => {
    const result = await noPassReviewApi(id, value)
    if(result.code){
      ElMessage.success(`已阻止发布该职位，原因：${value}`)
      QueryReview()
    }else{
      ElMessage.error(result.msg)
    }
  }).catch(() => {})
}
</script>

<template> 
  <h2>职位审核</h2>
  <div class="container">
    <el-button type="primary" @click="batchPass">批量通过</el-button>
  </div>
  <!-- 职位表格数据 -->
  <div class="container">
    <el-table :data="posListTable" border style="width: 100%; height: 500px;" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column prop="title" label="职位名称" width="160"  align="center"/>
      <el-table-column prop="salaryRange" label="薪资范围" width="160"  align="center"/>
      <el-table-column prop="experienceRequired" label="经验要求" width="160"  align="center"/>
      <el-table-column prop="educationRequired" label="学历要求" width="160"  align="center"/>
      <el-table-column label="职位类型" width="120" align="center" >
        <template #default="scope">
          <span v-if="scope.row.positionType == `全职`">全职</span>
          <span v-else-if="scope.row.positionType == `兼职`">兼职</span>
          <span v-else-if="scope.row.positionType == `实习`">实习</span>
          <span v-else>其他</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="提交时间" width="200"  align="center"/>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="info" plain size="small" @click="queryByPosId(scope.row.id)">查看</el-button>
          <el-button type="primary" plain size="small" @click="reviewPass(scope.row.id)">通过</el-button>
          <el-button type="danger" plain size="small" @click="noReviewPass(scope.row.id)">不通过</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="container"> 
    <!-- 简洁版职位详情Dialog -->
    <el-dialog
      v-model="detailVisible"
      title="职位详情"
      width="600px"
    >
      <el-descriptions :column="1" border>
        <el-descriptions-item label="企业名称">
          {{ positionDetail.companyName }}
        </el-descriptions-item>
        <el-descriptions-item label="职位名称">
          {{ positionDetail.title }}
        </el-descriptions-item>
        <el-descriptions-item label="薪资范围">
          {{ positionDetail.salaryRange }}
        </el-descriptions-item>
        <el-descriptions-item label="工作地点">
          {{ positionDetail.workLocation || '未填写' }}
        </el-descriptions-item>
        <el-descriptions-item label="经验要求">
          {{ positionDetail.experienceRequired }}
        </el-descriptions-item>
        <el-descriptions-item label="学历要求">
          {{ positionDetail.educationRequired }}
        </el-descriptions-item>
        <el-descriptions-item label="职位类型">
          {{ positionDetail.positionType }}
        </el-descriptions-item>
        <el-descriptions-item label="提交时间">
          {{ positionDetail.createTime }}
        </el-descriptions-item>
      </el-descriptions>

      <div class="detail-block">
        <h4>职位描述</h4>
        <div class="content-box">{{ positionDetail.description || '无' }}</div>
      </div>

      <div class="detail-block">
        <h4>职位要求</h4>
        <div class="content-box">{{ positionDetail.requirements || '无' }}</div>
      </div>

      <template #footer>
        <el-button @click="detailVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
    <!-- 分页 -->
  <div class="container">
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 15, 30]"
      :size="size"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<style scoped>
.container {
  margin-top: 10px;
}
.detail-block {
  margin-top: 20px;
}

.detail-block h4 {
  margin-bottom: 8px;
  color: var(--el-text-color-primary);
}

.content-box {
  padding: 12px;
  border: 1px solid var(--el-border-color-light);
  border-radius: 4px;
  background-color: var(--el-fill-color-lighter);
  min-height: 60px;
}
</style>